// 修复版样式 - 确保基本布局正常

// 导入主题变量
@import '../styles/theme.less';
@import '../styles/animations.less';

// 重置样式
* {
  box-sizing: border-box;
}

// 主容器
.chat-container-modern {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #0a0118 0%, #1a0f2e 50%, #251a3a 100%);
  color: #fff;
  overflow: hidden;

  // 侧边栏
  .chat-sidebar-modern {
    width: 280px;
    min-width: 280px;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    
    &.collapsed {
      width: 60px;
      min-width: 60px;
    }

    .sidebar-header {
      padding: 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .toggle-btn {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.65);
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;

        &:hover {
          background: rgba(255, 255, 255, 0.06);
          color: #fff;
        }
      }
    }

    .new-chat-btn {
      margin: 16px;
      height: 44px;
      background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
      border: none;
      border-radius: 12px;
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
      }
    }

    .conversation-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;

      .conversation-item {
        padding: 16px;
        margin-bottom: 8px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;

        &:hover {
          background: rgba(255, 255, 255, 0.06);
        }

        &.active {
          background: rgba(255, 255, 255, 0.09);
          border-left: 3px solid #a855f7;
        }

        .conversation-title {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.85);
        }

        .delete-btn {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          opacity: 0;
          transition: opacity 0.2s ease;
          background: transparent;
          border: none;
          color: rgba(255, 255, 255, 0.45);
          cursor: pointer;
          padding: 4px;

          &:hover {
            color: #ef4444;
          }
        }

        &:hover .delete-btn {
          opacity: 1;
        }
      }
    }
  }

  // 主聊天区域
  .chat-main-modern {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .chat-header {
      padding: 16px 24px;
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;

      h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .header-actions {
        display: flex;
        gap: 16px;

        .model-selector {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          padding: 8px 16px;
          color: rgba(255, 255, 255, 0.65);
          font-size: 14px;
          display: flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;

          &:hover {
            border-color: #a855f7;
            color: #a855f7;
          }

          .model-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
          }
        }
      }
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 24px;

      .welcome-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;

        .welcome-title {
          margin-bottom: 48px;

          .logo-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: #fff;
            box-shadow: 0 0 40px rgba(124, 58, 237, 0.3);
          }

          h1 {
            font-size: 36px;
            font-weight: 700;
            margin: 0 0 8px;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.65);
            margin: 0;
          }
        }

        .example-questions {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 16px;
          max-width: 800px;
          width: 100%;

          .example-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 24px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-4px);
              background: rgba(255, 255, 255, 0.05);
              border-color: #a855f7;
            }

            .card-icon {
              font-size: 32px;
              margin-bottom: 8px;
            }

            .card-title {
              font-size: 16px;
              font-weight: 600;
              color: #fff;
              margin-bottom: 4px;
            }

            .card-desc {
              font-size: 14px;
              color: rgba(255, 255, 255, 0.65);
            }
          }
        }
      }

      .message-wrapper {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;

        &.user {
          flex-direction: row-reverse;

          .message-content-wrapper {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            border-bottom-right-radius: 4px;
          }
        }

        &.assistant {
          .message-content-wrapper {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom-left-radius: 4px;
          }
        }

        .message-avatar {
          flex-shrink: 0;
          width: 36px;
          height: 36px;
          border-radius: 12px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .message-content-wrapper {
          max-width: 70%;
          padding: 16px 24px;
          border-radius: 16px;
          line-height: 1.6;

          pre {
            background: #1e1e2e;
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
            margin: 16px 0;

            code {
              background: transparent;
              color: #cdd6f4;
              padding: 0;
              font-size: 14px;
              line-height: 1.5;
            }
          }

          code {
            background: rgba(124, 58, 237, 0.1);
            color: #a855f7;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.9em;
          }

          a {
            color: #a855f7;
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }
          }

          .typing-cursor {
            display: inline-block;
            width: 3px;
            height: 20px;
            background: #a855f7;
            margin-left: 2px;
            animation: blink 1s infinite;
            vertical-align: text-bottom;
          }

          .streaming-content {
            display: inline;
            white-space: pre-wrap;
            word-break: break-word;
            
            span {
              white-space: pre-wrap;
            }
            
            .typing-cursor {
              display: inline-block;
              vertical-align: baseline;
            }
          }

          .message-actions {
            position: absolute;
            bottom: 8px;
            right: 8px;
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s ease;

            button {
              background: rgba(255, 255, 255, 0.03);
              border: 1px solid rgba(255, 255, 255, 0.08);
              color: rgba(255, 255, 255, 0.65);
              padding: 4px 8px;
              border-radius: 4px;
              font-size: 12px;
              cursor: pointer;

              &:hover {
                background: rgba(255, 255, 255, 0.06);
                color: #fff;
                border-color: #a855f7;
              }
            }
          }

          &:hover .message-actions {
            opacity: 1;
          }
        }
      }
    }

    .chat-input-container {
      padding: 16px 24px 24px;
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      .input-wrapper {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 16px;
        transition: all 0.2s ease;

        &.focused {
          border-color: #a855f7;
          box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }

        .chat-input {
          background: transparent;
          border: none;
          color: #fff;
          font-size: 16px;
          line-height: 1.5;
          resize: none;
          width: 100%;

          &:focus {
            outline: none;
          }

          &::placeholder {
            color: rgba(255, 255, 255, 0.45);
          }
        }

        .input-actions {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 8px;

          .input-tools {
            display: flex;
            gap: 8px;

            button {
              background: transparent;
              border: none;
              color: rgba(255, 255, 255, 0.45);
              padding: 4px;
              cursor: pointer;
              border-radius: 4px;

              &:hover {
                background: rgba(255, 255, 255, 0.06);
                color: #fff;
              }
            }
          }

          .send-button {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            border: none;
            color: white;
            padding: 8px 24px;
            border-radius: 24px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;

            &:hover:not(:disabled) {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }
        }
      }

      .input-hints {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);

        .hint-item {
          display: flex;
          align-items: center;
          gap: 4px;

          kbd {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 11px;
          }
        }
      }
    }
  }
}

// 响应式
@media (max-width: 768px) {
  .chat-container-modern {
    .chat-sidebar-modern {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 10;
      transform: translateX(-100%);

      &.mobile-open {
        transform: translateX(0);
      }
    }
  }
}
